<template>
  <div>
    <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">

   <!--   <a-form-item  >
        <template slot="label">
          <span class="ant-form-item-required">选择享受权益会员级别</span>
        </template>
        <a-checkbox-group :options="vipList"  v-model="CommonData.gradeIdList" @change="checkChange">

        </a-checkbox-group>
      </a-form-item>-->
      <a-form-item  label="选择享受权益会员级别">
        <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
          全选
        </a-checkbox>
        <br>
        <a-checkbox-group :options="vipList"  v-model="CommonData.gradeIdList" @change="checkChange">
        </a-checkbox-group>
      </a-form-item>
      <a-form-item >
        <template slot="label">
          <span class="ant-form-item-required">权益名称</span>
        </template>
        <a-input :style="{width:'200px'}" v-model="CommonData.generalName"></a-input>
      </a-form-item>

      <a-form-item >
        <template slot="label">
          <span class="ant-form-item-required">展示名称</span>
        </template>
        <a-input :style="{width:'200px'}"  :maxLength="7" v-model="CommonData.benefitName"></a-input>
      </a-form-item>


      <a-form-item >
        <template slot="label">
          <span class="">权益内容</span>
        </template>

        <div style="line-height: 40px">
          会员可享受更低价购买商品
        </div>

      </a-form-item>

      <a-form-item >

        <template slot="label">
          <span class="ant-form-item-required">权益图标</span>
        </template>
        <div class="shareImgBox">
          <div class="h5">
            <div class="image_wrap" :style="{
                                                background: CommonData.benefitIcon
                                                  ? `url(${CommonData.benefitIcon}) no-repeat 50% 50% /cover`
                                                  : '',
                                              }">

              <div class="hoverBox" v-if="CommonData.benefitIcon">
                <a-popconfirm
                  title="是否确认删除？"
                  @confirm="() => deleteImg('benefitIcon')"
                  :getPopupContainer="getPopupContainer()"
                >
                  <div class="delBtn">删除</div>
                </a-popconfirm>
                <div class="updatelBtn" @click="updateImgUrl('benefitIcon')">
                  替换
                </div>
              </div>
              <div class="image addBox" v-else>
                <img src="~@/assets/images/share/add.png"
                     style="width: 36px; height: 36px; margin-top: -10px"
                     @click="updateImgUrl('benefitIcon')"
                />
              </div>

            </div>
            <div style="text-align: center; color: #999; font-size: 10px">
              建议72*72像素的png照片
            </div>
          </div>
        </div>
      </a-form-item>


      <br>
      <hr>
      <div style="height: 25px;"></div>
      <div>
        <span>权益说明:</span>
        <a-button type="link" @click="openExampleModel">示例</a-button>
      </div>
      <br>


      <a-form-item >
        <template slot="label">
          <span class="ant-form-item-required">权益说明顶图</span>
        </template>
        <div class="shareImgBox">
          <div class="h5">
            <div class="image_wrap" :style="{
                                                background: CommonData.remarkTopPicture
                                                  ? `url(${CommonData.remarkTopPicture}) no-repeat 50% 50% /cover`
                                                  : '',
                                              }">

              <div class="hoverBox" v-if="CommonData.remarkTopPicture">
                <a-popconfirm
                  title="是否确认删除？"
                  @confirm="() => deleteImg('remarkTopPicture')"
                  :getPopupContainer="getPopupContainer()"
                >
                  <div class="delBtn">删除</div>
                </a-popconfirm>
                <div class="updatelBtn" @click="updateImgUrl('remarkTopPicture')">
                  替换
                </div>
              </div>
              <div class="image addBox" v-else>
                <img src="~@/assets/images/share/add.png"
                     style="width: 36px; height: 36px; margin-top: -10px"
                     @click="updateImgUrl('remarkTopPicture')"
                />
              </div>

            </div>
            <div style="text-align: center; color: #999; font-size: 10px">
              建议620*210像素的png照片
            </div>
          </div>
        </div>
      </a-form-item>

      <a-form-item>
        <template slot="label">
          <span class="ant-form-item-required">权益说明</span>
        </template>
        <a-col>
          <tinymce-editor v-model="CommonData.remark"></tinymce-editor>
        </a-col>
      </a-form-item>

      <a-form-item >
        <template slot="label">
          <span class="ant-form-item-required ">是否启用</span>
        </template>
        <a-switch  v-model="CommonData.isOn" @change="changeIsOn"></a-switch>
      </a-form-item>

      <a-form-item>
        <a-col :offset="11">
          <a-space>
            <a-button type="primary" @click="submitData">保存</a-button>
            <a-button @click="handleCancel">取消</a-button>
          </a-space>
        </a-col>
      </a-form-item>
    </a-form>



    <Example :visible="exampleVisible" @cancel="closeExampleModel"></Example>
    <upload-modal
      :visible="chooseimgVisivle"
      @cancel="closeInfoModal"
      @getImgUrl="getImgUrl"
    ></upload-modal>
    <!--      <SelectImage :visible="selectImageShow"
                       :selectedFileUrls="selectedFileUrls"
                       @cancel="selectImageShow=false;"
                       @submit="handleSelectImageChange"></SelectImage>-->
  </div>
</template>

<script>
  // import ImageUploadList from '@/components/form/UploadImage'
  // import uploadModal from "@components/antBase/uploadModal.vue";
  // import ImageUploadList from '../components/UploadImage'
  // import RadioSearchTable from './radioSearchTable'
  // import Example from "./viprightcomponents/Example";
  import mixin from "./mixins/index"
  export default {
    name: "ExchangePoint",
    mixins:[mixin],
    data(){
      return{
        benefitType:9
      }
    },
    /*    props: {
          formData: {
            type: Object
          }
        },
        components: {
          // ImageUploadList,
          // RadioSearchTable,
          Example,
          uploadModal
        },
        data() {
          return {
            rightType: 'MakePoint',
            CommonData: {
              gradeIdList:[],
              // 权益名称
              generalName:"",
              //展示名称
              benefitName:"",
              benefitIcon: '',
              remark: '',
              isOn: true,

              remarkTopPicture:'',


            },
            // selectImageShow:false,
            // 会员等级列表
            vipList:[],

            // 示例相关
            exampleVisible:false,

            // 选择图片相关
            chooseimgVisivle:false,
            imgType:''
          }
        },
        created() {
          this.getVipList()
        },
        mounted() {
          // this.getInfo()
        },
        watch:{
          formData:{
            immediate:true,
            deep:true,
            handler(old,newss){
              console.log(old,newss)
              this.getInfo()
              // 获取会员列表

            }

          }
        },
        methods: {
          getInfo() {
            console.log('接收传过来的makePoint数据', this.formData)
            if (this.formData.id) {
              this.CommonData.benefitIcon = this.formData.benefitIcon
              this.CommonData.benefitName = this.formData.benefitName
              this.CommonData.generalName = this.formData.generalName
              this.CommonData.remarkTopPicture = this.formData.remarkTopPicture
              this.CommonData.remark = this.formData.remark
              //gradeIdList 后端暂时没给  只要里面的id
              // this.CommonData.gradeIdList = this.formData.gradeIdList
              for (let item of this.formData.gradeList) {
                this.CommonData.gradeIdList.push(item.id)
              }

              this.CommonData.isOn = this.formData.isEnable === 1 ? true : false

            } else {
              return
              // 获取会员列表

            }
          },
          changeIsOn(val) {
          },
          handleCancel() {
            this.$router.push({name: 'CustomerVipRight'})
          },

          submitData() {

            console.log('提交表单数据:', this.CommonData)
            // 参数说明: 权益名称, 权益类型, 权益icon, 权益说明,是否可用,积分规则,微页面id,优惠券id集合
            if (this.formData.id) {
              this.$post('goldenhome/member/admin_/member/benefits/update', {
                id: this.formData.id,
                benefitName: this.CommonData.benefitName,
                generalName: this.CommonData.generalName,
                benefitType: 3,
                benefitIcon: this.CommonData.benefitIcon,
                remarkTopPicture: this.CommonData.remarkTopPicture,
                remark: this.CommonData.remark,
                isEnable: Number(this.CommonData.isOn),
                gradeIdList:this.CommonData.gradeIdList,
                // mspageId:'',
                // couponIdList:'',
                // 参数说明: 登录商城次数 浏览时长 	每次登录获取积分数 分享商品次数 每次分享商品获取积分数
                //           每天评价商品次数 每次评价商品获取积分数 完善个人信息获取积分数 首单获取积分数

              }).then(res => {
                if (res && res.returnCode === 1000) {
                  console.log('***********')
                  console.log(res)
                  this.$message.success('操作成功!')
                  this.$router.push({name: 'CustomerVipRight'})
                }
              })
            } else {
              this.$post('goldenhome/member/admin_/member/benefits/add', {
                benefitName: this.CommonData.benefitName,
                generalName: this.CommonData.generalName,
                benefitType: 3,
                benefitIcon: this.CommonData.benefitIcon,
                remarkTopPicture: this.CommonData.remarkTopPicture,
                remark: this.CommonData.remark,
                isEnable: Number(this.CommonData.isOn),
                gradeIdList:this.CommonData.gradeIdList,
                // mspageId:'',
                // couponIdList:'',
                // 参数说明: 登录商城次数 浏览时长 	每次登录获取积分数 分享商品次数 每次分享商品获取积分数
                //           每天评价商品次数 每次评价商品获取积分数 完善个人信息获取积分数 首单获取积分数
              }).then(res => {
                if (res && res.returnCode === 1000) {
                  console.log('***********')
                  console.log(res)
                  this.$message.success('操作成功!')
                  this.$router.push({name: 'CustomerVipRight'})
                }
              })
            }

          },

          openModel(){
            this.visible = true
          },
          closeModal(){
            this.visible = false
          },


          async getVipList() {
            const res = await this.$get('goldenhome/member/admin_/member/gradeconfig/list')
            if (res && res.returnCode === 1000) {
              // this.$message.success('操作成功!')
              console.log(res)
              res.dataInfo.forEach((item) => {
                const {id, gradeName, ...other} = item
                this.vipList[this.vipList.length] = {id, gradeName}
              })

              this.vipList.forEach((item) => {
                this.$set(item, "gradeId", item.id)
                this.$set(item, "label", item.gradeName)
                this.$set(item, "value", item.id)
                // this.$set(item, "use", 0)
              })

              this.vipList = this.unique(this.vipList)
              console.log('this.vipList', this.vipList)
            }
          },
          checkChange(checkedValues){
            console.log('checked = ', checkedValues);
            console.log('value = ', this.CommonData.gradeIdList);
          },


          openExampleModel(){
            this.exampleVisible = true
          },
          closeExampleModel(){
            this.exampleVisible = false
          },

          // 素材库modal 相关
          updateImgUrl(type) {
            console.log(type)
            this.imgType = type
            this.chooseimgVisivle = true;
          },
          deleteImg(type) {
            console.log(type)
            this.imgType = type
            console.log(this.imgType)
            // console.log()
            if (this.imgType=='remarkTopPicture'){
              this.CommonData.remarkTopPicture = ''
            }
            if (this.imgType=='benefitIcon'){
              this.CommonData.benefitIcon = ''
            }
            /!* console.log(type)
             this.CommonData.remarkTopPicture = ''
             this.painting.views[0].url = ''*!/

          },
          getPopupContainer() {
            return (triggerNode) => triggerNode.parentNode;
          },
          getImgUrl(value) {
            // console.log(value)
            if (this.imgType=='remarkTopPicture'){
              this.CommonData.remarkTopPicture = value
            }
            if (this.imgType=='benefitIcon'){
              this.CommonData.benefitIcon = value
            }

          },

          closeInfoModal() {
            this.chooseimgVisivle = false;
          },


          // 对象去重
          unique(objArray){
            let result = {};
            let finalResult=[];
            for(let i=0;i<objArray.length;i++){
              result[objArray[i].gradeName]=objArray[i];
            }
            for(let item in result){
              finalResult.push(result[item]);
            }
            return finalResult;
          }
        },*/
  }
</script>

<style scoped lang="less">
  .upload_btn{
    width: 104px;
    height: 104px;
    margin: 0 8px 8px 0;
    text-align: center;
    font-size:24px;
    cursor: pointer;
    line-height: 96px;
    padding: 8px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background:#fafafa;
    display:inline-block;
  }


  .shareImgBox {
    display: flex;
    /*justify-content: space-around;*/
    width: 100%;
    .mini,
    .h5 {
      width: 160px;
      height: 120px;
      background: rgb(238, 240, 244);
      .image_wrap {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background-color: #fff;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        .hoverBox {
          background: rgba(25, 25, 25, 0.4);
          border-radius: 4px;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 99999999;
          display: none;
          div {
            width: 50px;
            height: 26px;
            background: #ffffff;
            border-radius: 2px;
            border: 1px solid #979797;
            line-height: 26px;
            font-weight: 400;
            text-align: center;
            margin: auto;
          }
          .delBtn {
            color: #ff5253;
            margin-top: 25px;
          }
          .updatelBtn {
            margin-top: 15px;
            color: #666666;
          }
        }
        .image {
          width: 100%;
          height: 100%;
          border-radius: 4px;
        }
        .text {
          width: 100%;
          background-color: rgba(0, 0, 0, 0.6);
          color: #fff;
          position: absolute;
          bottom: 0;
          text-align: center;
          white-space: nowrap;
          line-height: 30px !important;
          font-size: 16px;
        }
      }
      &:hover {
        .hoverBox {
          display: block;
        }
      }
    }
  }
  .action {
    width: 100%;
    padding: 0 10px;
    margin-top: 60px;
  }
  .addBox {
    display: flex;
    /*width: 100%;*/
    /*height: 100%;*/
    justify-content: center;
    align-items: center;
  }

  /deep/.ant-form-item-control{
    line-height: 25px;
  }
  /deep/.ant-popover-buttons {
    display: flex;
  }
  /deep/ .ant-form-item .ant-switch{
    margin: 9px 0 4px;
  }
</style>